jQuery — Check Elements and Ajax

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.is()

The is method lets us check the current matched set of elements against a selector, element, or jQuery object.

It returns true if at least one of thee elements matches the given elements.

For example, if we have:

<ul>
  <li>list <strong>item 1</strong></li>
  <li><span>list item 2</span></li>
  <li>list item 3</li>
</ul>

Then we can check if the element we currently clicked on is an li and add a red background to it by writing:

$("ul").click(function(event) {
  const target = $(event.target);
  if (target.is("li")) {
    target.css("background-color", "red");
  }
});

jQuery()

The jQuery() function takes a string with a CSS selector to match a set of elements.

For example, if we have the following HTML:

<div class='foo'>
  <span>foo</span>
</div>
<div>
  bar
</div>

and CSS:

.bar {
  background: green
}

We can add the bar class to a span inside the div with class foo by writing:

$("div.foo").click(function() {
  $("span", this).addClass("bar");
});

.jquery

The .jquery property lets us get a string containing the jQuery version number.

So we can write:

console.log($.fn.jquery)

to get that.

jQuery.ajax()

We can make an Ajax request with the jQuery.ajax() method.

For example, we can make a GET request by writing:

const jqxhr = $.ajax("https://jsonplaceholder.typicode.com/posts/1")
  .done(function() {
    alert("success");
  })
  .fail(function() {
    alert("error");
  })
  .always(function() {
    alert("complete");
  });

jqxhr.always(function() {
  alert("second complete");
});

We call done with a callback to run something after the request is successful.

The fail callback is run when the request fails.

The always callback is run whenever the request is done regardless of outcome.

jqxhr.always ‘s callback is run whenever the request is done regardless of outcome.

jQuery.ajaxPrefilter()

The jQuery.ajaxPrefilter() method handles custom Ajax options or modifies existing options before each request is sent and before they’re processed by $.ajax() .

For example, we can write:

const currentRequests = {};

$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
  if (options.abortOnRetry) {
    if (currentRequests[options.url]) {
      currentRequests[options.url].abort();
    }
    currentRequests[options.url] = jqXHR;
  }
});

$.ajax("https://jsonplaceholder.typicode.com/posts/1")
  .done(function() {
    alert("success");
  })

to check if the abortOnRetry option is enabled and call abort if the request URL is in the currentRequests object.

This way, it won’t retry after it’s already been tried.

jQuery.ajaxSetup()

The jQuery.ajaxSetup() method lets us add set default values for future Ajax requests.

But its use isn’t recommended.

For example, we can write:

$.ajaxSetup({
  url: "https://jsonplaceholder.typicode.com/posts/1"
});

$.ajax()
  .done(function() {
    alert("success");
  })

Then the default URL to make the request to is ”https://jsonplaceholder.typicode.com/posts/1" .

jQuery.ajaxTransport()

We call the jQuery.ajaxTransport() method to create an object that handles the transmission of Ajax data.

For example, we can write:

jQuery.ajaxSetup({
  accepts: {
    script: "application/json"
  },
  contents: {
    script: /json/
  },
  converters: {
    "text script": jQuery.globalEval
  }
});

$.ajax("https://jsonplaceholder.typicode.com/posts/1")
  .done(function() {
    alert("success");
  })

to add the application/json header to our request.

Conclusion

We can check element type with the is method.

Also, we can call various method to set up our Ajax requests.